<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对比结果</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            min-width: 900px;
        }

        /*
                width可以改变右边滚动条的宽度
                height可以改变下边滚动条的高度
                */
        ::-webkit-scrollbar {
            width: 9px;
            height: 9px;
            box-sizing: border-box;
        }

        /*
        设置了滚动条按钮的样式图标，url我直接用了base64图片，无所谓啦
        */
        ::-webkit-scrollbar-button {
            width: 9px;
            height: 12px;
            background: url();
            background-color: transparent;
            background-repeat: no-repeat;
        }

        /*
        corner角落的意思，可以改变Y滚动条与X滚动条交叉的右下角的样式
        */
        ::-webkit-scrollbar-corner {
            background-color: #f1f1f1;
            -webkit-border-radius: 1px;
        }

        /*
        这就是滚动条的样式了
        */
        ::-webkit-scrollbar-thumb {
            background-color: #E7E7E7;
            border: 1px solid rgba(0, 0, 0, 0.21);
            -webkit-border-radius: 5px;
        }

        /*
        悬浮时
        */
        ::-webkit-scrollbar-thumb:hover {
            background-color: #F6F6F6;
            border: 1px solid rgba(0, 0, 0, 0.21);
        }

        /*
        滚动条空白处的样式
        */
        ::-webkit-scrollbar-track-piece {
            background-color: rgba(0, 0, 0, 0.15);
            -webkit-border-radius: 5px;
        }

        .row {
            padding: 10px;
        }
    </style>

</head>
<body>
<div class="container-fluid" style="padding: 10px;" id="compare-container">
    <template v-if="json.code == 299">
        <div class="row" style="max-height: 300px; overflow-y: scroll">
            <div v-for="item in json.content"
                 v-bind:class="['list-group-item', item.level == 2 ? 'list-group-item-warning': 'list-group-item-danger']">{{ item.modifyDDL.msg }}</div>
        </div>
        <div class="row" style="max-height: 300px; overflow-y: scroll">
            <template v-for="item in json.content">
                <template v-for="sql in item.modifyDDL.ddls">
                    <textarea class="form-control" style="resize:vertical" rows="3">{{ sql }}</textarea>
                    <!--<button v-on:click="executeSQL($event)" class="btn btn-primary btn-execute-sql pull-right"-->
                            <!--style="margin-top: 10px;margin-bottom: 10px" type="button">执行-->
                    <!--</button>-->
                </template>
            </template>
        </div>
    </template>
    <template v-if="json.code != 299">
        <div class="row">
            <div class="list-group-item list-group-item-success">实体和数据库字段全部相同</div>
        </div>
    </template>

    <!--<button class="btn btn-warning pull-right" style="margin-top: 10px;margin-bottom: 10px">全部执行</button>-->
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/varUtils.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.2.0/vue-resource.min.js"></script>
<script>
    Vue.use(VueResource);
    Vue.filter('replace_', function (value) {
        return value.replace(/\./g, "_");
    });
    var vue = new Vue({
        el: '#compare-container',
        ready: function () {
            searchFormAction(this);
        },
        beforeDestroy: function () {
            console.log("123");
        },
        methods: {
            //刷新表单
            searchForm: function () {
                searchFormAction(this);
            },
            //点击对比
            defaultOpenLinkVue: function (event) {
                var thisEl = this;
                event = event ? event : window.event;
                var obj = event.currentTarget ? event.currentTarget : event.target;
                defaultOpenLinkFunction(event, $(obj));
            },
            executeSQL: function (event) {
                event = event ? event : window.event;
                var obj = event.currentTarget ? event.currentTarget : event.target;
                var prev = $(obj).prev();
                var sql = prev.val();
                var tableName = getQueryString("tableName");
                var columnName = getQueryString("columnName");
                
            }
        },
        data: {
            json: []
        }

    });
    function searchFormAction(vue) {
        var tableName = getQueryString("tableName");
        var columnName = getQueryString("columnName");
        var url ;
        if( columnName ){
            url = "column.json?tableName=" + tableName + "&columnName=" + columnName;
        } else {
            url = "tableColumn.json?tableName=" + tableName ;
        }
        vue.$http.get(url).then(function (response) {
            vue.$set('json', response.data);
            console.log(response.data);
        });
    }


    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)return unescape(r[2]);
        return null;
    }

</script>
</body>
</html>